<template>
  <div class="work_rec" id="Scroll">
    <div id="scroll">
      <ul>
        <li v-for="(work,ind) in contents" :key="ind" class="row">
          <img :src="work.img" alt>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["contents"])
  },
  mounted() {
    let myScroll;
    setTimeout(() => {
      myScroll = new IScroll(".work_rec", {
        mouseWheel: true,
      });
    }, 1000);
  }
};
</script>
<style scoped>
.work_rec {
  width: 100%;
  position: absolute;
  top: 0.8rem;
  bottom: 0;
  overflow: hidden;
}
#scroll {
  width: 100%;
}
.work_rec ul {
  display: flex;
  width: 100%;
  flex: 1;
  flex-wrap: wrap;
}
.work_rec ul li {
  flex-shrink: 1;
  height: 3.75rem;
  background: palevioletred;
}
.work_rec ul li img {
  height: 3.75rem;
  width: 3.75rem;
}
</style>
